<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<!-- <u-sticky bgColor="none"> -->
		<!-- 只能有一个根元素 -->
		<view class="sticky">
			<view class="searchs">
				<u-search @search="search" placeholder-color="rgba(255, 255, 255, 0.5)" :input-style="inputStyle"
					:show-action="false" color="#FFFFFF" height="80" bg-color="rgba(255, 255, 255, 0.5)"
					placeholder="搜索关键词" @change="onInput" :clearabled="false">
				</u-search>
			</view>

		</view>
		<!-- </u-sticky> -->

		<cate :list="searchList" />
		<u-empty v-if="searchIsEmpty" color="#A897D9" text="暂无数据"
			src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>

		<!-- hot -->
		<view class="hotRec">
			<view class="hot">
				<image class="icon" src="https://tb.wuyouzhuan888.com/applet-icon/zan.png" mode="">
				</image>
				其他热门推荐
			</view>
		</view>
		<cate :list="recommendList" />
		<!-- 加载中提示 -->
		<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
			margin-bottom="10" />
		<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
			src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>

	</view>

</template>
<script>
	import cate from '@/components/cate/index'

	export default {
		components: {
			cate
		},
		data() {
			return {

				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				current: 0,

				inputStyle: {
					backgroundColor: 'none'
				},
				keyword: '',
				// 搜索列表
				searchList: [],
				searchIsEmpty: false,
				// 数据为空
				isEmpty: false,
				status: "loadmore",
				// 推荐列表
				recommendList: [],
				recommendTotal: 0,
				recommendPage: 1,
				recommendSize: 10,
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中...",
			})
			this.keyword = options.keyword
			if (this.keyword) {
				// 获取关键词列表
				this.getList()
			}

			// 获取搜索页推荐列表
			this.getRecommendList()

		},
		mounted() {
			uni.hideLoading()
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.recommendPage * this.recommendSize;

			if (allTotal < this.recommendTotal) {
				//当前条数小于总条数 则增加请求页数
				//加载中状态
				this.status = "loading";
				this.recommendPage++;
				this.getRecommendList();
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			onInput(e) {
				this.keyword = e
			},
			search() {
				// this.keyword = this.keyword.replace(/[, ]/g, '');
				if (this.keyword == '') {
					this.$u.toast('请输入搜索内容');
					return
				}
				this.getList();
			},
			// 关键词搜索
			getList() {
				this.$u.api.search.getList({
					keyword: this.keyword
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}

					this.searchList = res.data

					if (this.searchList && this.searchList.length == 0) {
						this.searchIsEmpty = true;
					} else {
						this.searchIsEmpty = false;
					}

				})
			},
			// 获取搜索页推荐列表
			getRecommendList() {
				this.$u.api.search.getRecommendList({
					page: this.recommendPage,
					size: this.recommendSize
				}).then(res => {

					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					if (res.data.total) {
						this.recommendTotal = res.data.total;
					}

					// 页数大于1则追加
					if (this.recommendPage > 1) {
						this.recommendList.push(...res.data.list);
					} else {
						this.recommendList = res.data.list
					}

					if (this.recommendSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.recommendList && this.recommendList.length == 0) {
						this.isEmpty = true;
					}
				})
			},
			navDetail() {
				uni.navigateTo({
					url: "/pages/sys/cate_bags/detail"
				})
			},
			change(index) {
				this.current = index;
			},
			imgListClick(index) {}
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 32rpx 0 0;
		padding-bottom: 60rpx;

		.hotRec {
			margin: 60rpx 0 27px;
			display: flex;
			justify-content: center;

			.hot {
				background: rgba(140, 121, 255, 0.48);
				border-radius: 49rpx;
				padding: 5rpx 27rpx;
				display: inline-flex;

				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;

				.icon {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
				}
			}
		}


		.searchs {
			margin: 0 32rpx 24rpx;

			/deep/ .u-icon__icon {
				font-size: 36rpx;
			}

			/deep/ .u-content {
				padding-left: 35rpx;
			}
		}


	}
</style>